<template>
	<view class="nav-bar">
		<view :style="{ height: topSafeHeight + 'px' }" class="top-safe-area"></view>
		<uni-nav-bar
			v-if="isLeft"
			:dark="dark"
			:shadow="shadow"
			:border="false"
			:title="title"
			:background-color="backgroundColor"
			:style="{ color: 'var(--text-color)' }"
			:left-icon="leftIcon"
			@clickLeft="back"
			:rightWidth="rightWidth"
		>
			<block slot="right">
				<slot name="right"></slot>
			</block>
		</uni-nav-bar>
		<uni-nav-bar
			v-else
			:dark="dark"
			:shadow="shadow"
			:border="false"
			:title="title"
			:background-color="backgroundColor"
			:style="{ color: 'var(--text-color)' }"
			@clickLeft="back"
		>
			<block slot="right">
				<slot name="right"></slot>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '标题'
		},
		leftIcon: {
			type: String,
			default: 'back'
		},
		clickLeft: {
			type: Function,
			default: null
		},
		dark: {
			type: Boolean,
			default: true
		},
		shadow: {
			type: Boolean,
			default: true
		},
		backgroundColor: {
			type: String,
			default: 'var(--head-bgColor)'
		},
		isLeft: {
			type: Boolean,
			default: true
		},
		rightWidth: {
			type: String || Number,
			default: '120rpx'
		}
	},
	data() {
		return {
			topSafeHeight: 34
		};
	},
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				this.topSafeHeight = res.safeAreaInsets.top;
			}
		});
	},
	methods: {
		back() {
			console.log('========================', this.clickLeft);
			if (this.clickLeft) {
				this.clickLeft();
			} else {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.nav-bar {
	uni-image {
		width: 40rpx;
		height: 40rpx;
	}

	::v-deep .uni-nav-bar-text {
		font-size: 16px;
	}
}
</style>
